<template>
	<view class="backGColor">
		<headerNavbarVue backIcon='https://file.whshiyuan.cn:9000/toopu/compressed/6301729060237_compressed_img.png'
			wordtitle='分享返利'></headerNavbarVue>
		<newCardVue></newCardVue>
		<mySelfCardVue :personInfo="PersonInfo"></mySelfCardVue>
		<MoneyCardVue ></MoneyCardVue>
		<view class="chart" ref="chartContainer">
			<JnChart canvasId="line" :option="optionLine" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import headerNavbarVue from './components/headerNavbar.vue';
	import newCardVue from './components/newCard.vue';
	import mySelfCardVue from './components/mySelfCard.vue';
	import MoneyCardVue from './components/MoneyCard.vue';
	import JnChart from './components/jn-chart/index.vue'
	import {
		Getday,
		GetwithDraData
	} from '../../config/API/shareBack';
	const optionLine = ref({})
	const isallData = ref()
	//用户的信息
	const PersonInfo = ref()
	onMounted(async () => {

		const data = await Getday()
		isallData.value = data.data.person_num_list
		getData(isallData.value)
		console.log('近7天数据', isallData.value)
		await  getPersonInfo()
		console.log('PersonInfo==>',PersonInfo.value);
	});

	function getData(isallData) {
		setTimeout(() => {
			const data = {
				names: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
				values: isallData
			};
			optionLine.value = getOption(data);
		}, 800);
	}
	//获取用户的账号信息
	const getPersonInfo = async () => {
		const getPersonInfoRes = await GetwithDraData()
		if (getPersonInfoRes.code == 200) {
			PersonInfo.value = getPersonInfoRes.data
		} else {
			uni.showToast({
				title: getPersonInfoRes.msg,
				icon: 'none'
			})
		}
	}

	function getOption(datasource) {
		const {
			values,
			names
		} = datasource;

		const option = {
			grid: {
				top: '5%',
				left: '5%',
				right: '5%',
				bottom: 0,
				containLabel: true
			},
			tooltip: {
				show: true,
				trigger: 'axis',
				confine: true,
				formatter: (params) => {
					const {
						value,
						name
					} = params[0];
					return `收益:${value}\n时间:${name}`;
				}
			},
			xAxis: {
				type: 'category',
				data: names,
				axisLine: {
					lineStyle: {
						color: '#aaa'
					}
				}
			},
			yAxis: {
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#aaa'
					}
				}
			},
			series: [{
				data: values,
				type: 'line',
				smooth: true,
				lineStyle: {
					color: '#4988ff'
				},
				itemStyle: {
					color: '#33A1FF'
				}
			}]
		};

		return option;
	}
</script>

<style scoped>
	@import url('css/BackMoney.css');

	.backGColor {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, rgb(193, 199, 214), rgb(225, 227, 233));
	}

	.chart {
		width: 90vw;
		height: 440rpx;
		margin: 0 auto;
		border-radius: 46.42rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>